<template>
    <div class="website-information">
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="formData" :inline="true">
                <el-form-item label="关键词">
                    <el-input
                        style="width:300px;"
                        placeholder="请输入appid，AppSecret，名称"
                        v-model="formData.keyword"
                        clearable
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage"
                        >查询</el-button
                    >
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <div>
                <el-button type="primary"  @click="handleAdd()">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    新增公众号
                </el-button>
            </div>
            <el-table ref="tableRef" class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists" row-key="id">
                <el-table-column label="id" prop="id" min-width="50" />
                <el-table-column label="名称" prop="pre" min-width="80">
                    <template #default="{ row }">
                        <div v-copy="row.name" style="cursor:pointer;">
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                :content="row.name"
                                placement="top-start"
                            >
                                <span style="font-size: 14px;font-weight: 400;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;">  {{ row.name }}</span>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="appid" prop="pre" min-width="100">
                    <template #default="{ row }">
                        <div v-copy="row.appid" style="cursor:pointer;">
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                :content="row.appid"
                                placement="top-start"
                            >
                                <span style="font-size: 14px;font-weight: 400;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;">  {{ row.appid }}</span>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="AppSecret" prop="pre" min-width="150">
                    <template #default="{ row }">
                        <div v-copy="row.app_secret" style="cursor:pointer;">
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                :content="row.app_secret"
                                placement="top-start"
                            >
                                <span style="font-size: 14px;font-weight: 400;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;">  {{ row.app_secret }}</span>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="授权域名" prop="pre" min-width="100">
                    <template #default="{ row }">
                        <div v-copy="row.domain" style="cursor:pointer;">
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                :content="row.domain"
                                placement="top-start"
                            >
                                <span style="font-size: 14px;font-weight: 400;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;">  {{ row.domain }}</span>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="配置状态" width="100">
                    <template #default="{ row }">
                        <span v-if="row.access_status == 0">未检测</span>
                        <span v-if="row.access_status == 1">正常</span>
                        <span v-if="row.access_status == 2">配置错误</span>
                        <el-button type="primary" link @click="cs(row.id)">
                            检测
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="480" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="handleEdit(row)">
                            参数配置
                        </el-button>
                        <el-button type="primary" link @click="addjr(row)">
                            服务器URL
                        </el-button>
                        <el-button type="primary" link @click="addcd(row)">
                            菜单管理
                        </el-button>
                        <el-button type="primary" link @click="addgz(row)">
                            关注回复
                        </el-button>
                        <el-button type="primary" link @click="addgjc(row)">
                            关键词回复
                        </el-button>
                        <el-button type="danger" link @click="handleDelete(row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex mt-4 justify-end">
                <paginat v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
    </div>
</template>
<script lang="ts" setup>
import {  wechatList,checkWechat,delWechat } from '@/api/application/gzh/index'
import { usePaging } from '@/hooks/usenew'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const showEdit = ref(false)
const formData = reactive({
    keyword:""
})
const { pager, getLists } = usePaging({
    fetchFun: wechatList,
    params: formData
})
const router = useRouter()
const addjr = (row:any) => {
    router.push("/plug/access/insert?id=" + row.id)
}
const addcd = (row:any) => {
    router.push("/plug/access/menu?id=" + row.id)
}
const addgz = (row:any) => {
    router.push("/plug/access/follow_reply?id=" + row.id)
}
const addgjc = (row:any) => {
    router.push("/plug/access/keyword_reply?id=" + row.id)
}
const handleAdd = async (id?: number) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('add')
}
const cs = async(id:any) => {
    await checkWechat({id:id})
    getLists()
}
const handleEdit = async (data: any) => {
    router.push("/plug/access/manage?id=" + data.id)
}
const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await delWechat({ id })
    getLists()
}
getLists()
</script>